import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import classNames from 'classnames'

import { CSkeleton } from '@/components'
import { Swiper, SwiperItem, Image, View } from '@tarojs/components'

import './index.scss'

interface IHomeBanner {
  loading: boolean
  bannerArr: any
}

/**
 * 首页 轮播图
 */
function HomeBanner(params: IHomeBanner) {
  const { loading = true, bannerArr = [] } = params
  const [current, setCurrent] = useState(0)

  function gotoPage(type, id) {
    switch (type) {
      case 1:
        Taro.navigateTo({
          url: '/pages/Home/HomeCardDetails/index?id=' + id,
        })
        break
      case 2:
        Taro.navigateTo({
          url: '/pages/College/CourseDetails/index?id=' + id,
        })
        break
      case 3:
        Taro.navigateTo({
          url: '/pages/Consulting/ConsultingDetails/index?id=' + id,
        })
        break

      default:
        break
    }
  }
  return (
    <View>
      {loading && <CSkeleton width={325} height={150} />}
      {!loading && (
        <Swiper
          autoplay
          circular
          className='home_swiper'
          indicatorColor='rgba(255,255,255,0.5)'
          indicatorActiveColor='rgba(255,255,255,0.9)'
          indicatorDots
          current={0}
          onChange={(res) => {
            const current = res.detail.current
            setCurrent(current)
          }}
        >
          {bannerArr.map((item, idx) => {
            return (
              <SwiperItem
                onClick={() => {
                  gotoPage(item.dvType, item.linkId)
                }}
                key={item.skuSn}
              >
                <Image src={item.advertisementImg} className={classNames(['banner-img', current === idx ? 'actived-img' : ''])} lazyLoad />
              </SwiperItem>
            )
          })}
        </Swiper>
      )}
    </View>
  )
}
export default React.memo(HomeBanner)
